<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    width="40%">
    <el-row :gutter="40">
      <el-col >
        <dynForm
          ref="dataForm"
          :info-form="searchForm"
          :rules="rules"
          :search-tags="searchTags"
          :is-inline="false"
          :select-list="selectList"/></el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button v-btnThrottle="doSave" type="primary" icon="el-icon-receiving">{{
        $t("save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getInfo, doUpdate, getEqpStatusList } from '@/api/OEE/eqpStatusManage'
export default {
  name: 'StatusManageDialog',
  components: {},
  props: {},
  data() {
    return {
      title: '',
      dialogVisible: false,
      searchForm: {},
      searchTags: [
        { label: this.$t('eqpName'), prop: 'eqpId', tag: 'DynInput', disabled: true },
        { label: this.$t('OperatingStatus'), prop: 'eqpStatus', tag: 'DynInput', disabled: true },
        { label: this.$t('startTime'), prop: 'startTime', tag: 'Dyntimerange', datatype: 'datetime',
          dataformat: 'yyyy-MM-dd HH:mm:ss', disabled: true },
        { label: this.$t('endTime'), prop: 'endTime', tag: 'Dyntimerange',
          datatype: 'datetime', dataformat: 'yyyy-MM-dd HH:mm:ss', disabled: true },
        { label: this.$t('ModifiedStatus'), prop: 'eqpStatusEdit', tag: 'DynSelect' },
        { label: this.$t('remark'), prop: 'remark', tag: 'DynTextarea', row: 2 }
      ],
      rules: {
        eqpStatusEdit: [{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('ModifiedStatus')}`, trigger: 'change' }]
      },
      selectList: {}
    }
  },
  methods: {
    doSave() {
      this.$refs['dataForm'].$refs['dynForm'].validate((valid) => {
        if (valid) {
          if (this.searchForm.id) {
          // 根据后端接口需要需要进行转换
            doUpdate({ ...this.searchForm }).then(res => {
              this.$betterTips(res, this.handleUpdate, this.handleClose)
            })
          }
        }
      })
    },
    // 触发父组件更新
    handleUpdate() {
      this.$emit('initList')
    },
    async handleOpen(val) {
      this.dialogVisible = true
      if (val && val.id) {
        this.title = this.$t('modify')
        const res = await getInfo({ id: val.id })
        const { data } = res
        this.searchForm = data
      } else {
        this.title = this.$t('add')
      }
      this.getStatusAllList()
      this.$nextTick(() => {
        this.$refs['dataForm'].$refs['dynForm'].clearValidate()
      })
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    async getStatusAllList() {
      const res = await getEqpStatusList()
      this.$set(this.selectList, 'eqpStatusEdit', res.data)
    }
  }
}
</script>
